<script lang="ts" setup>
	import { computed, ref } from "vue";
	import { ComTabMenu } from "../../types/com-tab-menu"
	import { mainBottomTabsHeight } from "../../utils/system";
	const props = defineProps({
		// tab项
		tabs: {
			type: Array<ComTabMenu>,
			required: true
		},
		// 初始选中
		initTabIndex: Number,
		// 主题颜色黑色
		themeInvert: {
			type: Boolean,
			default: false
		}
	})

	const tabIndex = ref(props.initTabIndex)
	const emit = defineEmits(['onChange'])
	const navigate = (index : number) => {
		if (props.tabs[index].isAddButton) {

		} else {
			tabIndex.value = index
			emit('onChange', index)
		}
	}
	import { useI18n } from 'vue-i18n';
	const { t, locale } = useI18n()
	const localeEnglish = computed(() => locale.value === 'en')
</script>

<template>
	<view class="tabs" :style="`height: ${mainBottomTabsHeight}rpx`" :class="{'theme-invert': themeInvert}">
		<view v-for="(item, index) in tabs" :key="item.path" class="tab flex-center"
			:class="{'tab-selected': tabIndex === index}" @click="navigate(index)">
			<view class="add-btn flex-center" v-if="item.isAddButton">
				<uni-icons type="plusempty" size="20" color="white"></uni-icons>
			</view>
			<i :class="`${localeEnglish ? tabIndex === index ? item.activeIcon : item.icon : ''} iconfont`" :style="`${(localeEnglish && tabIndex === 1) ? 'color: white' : ''}`"
				v-if="!item.isAddButton"></i>
			<text :class="{'en-tab-text': localeEnglish}">{{t(item.title as string)}}</text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import "@/static/font/iconfont.css";

	.tabs {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 10rpx 0;

		.tab,
		.add-btn {
			width: 85rpx;
		}

		.tab {
			font-size: $font-size-32;
			color: $secondary-text-color;
			cursor: pointer;
		}

		.tab-selected {
			font-weight: bold;
			font-size: $font-size-32;
			color: black;


		}

		.iconfont {
			color: black;
			width: 33rpx;
			height: 33rpx;
		}

		.en-tab-text {
			font-size: $font-size-16;
		}

		.add-btn {
			color: white;
			border: none;
			background-color: $primary-color;
			height: 65rpx;
			border-radius: 15rpx;
			font-size: $font-size-40;
			font-weight: bold;

			:deep() {
				.uni-icons {
					color: $primary-icon-color !important;
				}
			}
		}

		.en-tab {
			display: none;
		}
	}

	.theme-invert {
		background-color: black;

		.tab {
			color: rgba(91, 91, 91, 1);
		}

		.tab-selected {
			color: white;
		}

		.add-btn {
			background-color: rgba(34, 34, 34, 1);
		}
	}
</style>